<template>
  <div>
    <vxe-table
      border
      resizable
      show-overflow
      highlight-hover-row
      ref="xTable"
      height="500"
      :data="tableData"
      :edit-config="{trigger: 'click', mode: 'cell'}"
    >
      <vxe-table-column type="seq" width="60" :edit-render="{name: 'input', attrs: {type: 'text', placeholder: '请输入'}}"></vxe-table-column>
      <vxe-table-column field="name" title="Name" :edit-render="{name: 'input', attrs: {type: 'text', placeholder: '请输入'}}"></vxe-table-column>
      <vxe-table-column
        field="sex"
        title="Sex"
         :edit-render="{name: 'input', attrs: {type: 'text', placeholder: '请输入'}}"
      ></vxe-table-column>
      <vxe-table-column field="age" title="Age"  :edit-render="{name: 'input', attrs: {type: 'text', placeholder: '请输入'}}"></vxe-table-column>
      <vxe-table-column
        field="address"
        title="Address"
        show-overflow
         :edit-render="{name: 'input', attrs: {type: 'text', placeholder: '请输入'}}"
      ></vxe-table-column>
      <vxe-table-column title="操作" width="100" show-overflow>
        <template #default="{ row }">
          <vxe-button
            type="text"
            class="vxe-icon--edit-outline"
            @click="editEvent(row)"
          ></vxe-button>
        </template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 10001,
          name: "Test1",
          nickname: "T1",
          role: "Develop",
          sex: "0",
          sex2: ["0"],
          num1: 40,
          age: 28,
          address: "Shenzhen",
          date12: "",
          date13: "",
        },
        {
          id: 10002,
          name: "Test2",
          nickname: "T2",
          role: "Designer",
          sex: "1",
          sex2: ["0", "1"],
          num1: 20,
          age: 22,
          address: "Guangzhou",
          date12: "",
          date13: "2020-08-20",
        },
        {
          id: 10003,
          name: "Test3",
          nickname: "T3",
          role: "Test",
          sex: "0",
          sex2: ["1"],
          num1: 200,
          age: 32,
          address: "Shanghai",
          date12: "2020-09-10",
          date13: "",
        },
        {
          id: 10004,
          name: "Test4",
          nickname: "T4",
          role: "Designer",
          sex: "1",
          sex2: ["1"],
          num1: 30,
          age: 23,
          address: "Shenzhen",
          date12: "",
          date13: "2020-12-04",
        },
      ],
    };
  },
  methods: {
    editEvent(row) {
      console.log(111, row);
    },
  },
};
</script>
